<template>
  <el-form ref="form" :rules="rules" label-width="180px">
    <el-form-item label="步骤名称" prop="name">
      <el-input v-model="step.name"></el-input>
    </el-form-item>
    <el-form-item label="发送给true的数据步骤">
      <el-select v-model="step.send_true_to" placeholder="发送给true的数据步骤" style="padding-right: 25px">
        <el-option v-for="next in nextSteps" :label="next.name" :value="next.id"></el-option>
      </el-select>
      发送给false的数据步骤
      <el-select v-model="step.send_false_to" placeholder="发送给false的数据步骤">
        <el-option v-for="next in nextSteps" :label="next.name" :value="next.id"></el-option>
      </el-select>
    </el-form-item>
    <el-button type="primary" @click="addRecord" icon="plus"></el-button>
    <br> <br>
    <el-tabs type="card" @tab-remove="removeTab" v-model="tabs.activeTabIndex">
      <el-tab-pane label="条件列表" name="0">
        <el-table :data="step.conditions" stripe style="width: 100%" :max-height="400">
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column prop="operator" label="操作符" width="120"></el-table-column>
          <el-table-column prop="negated" label="取反" width="80"></el-table-column>
          <el-table-column prop="leftvalue" label="字段1" width="120"></el-table-column>
          <el-table-column prop="function" label="条件" width="120"></el-table-column>
          <el-table-column prop="rightvalue" label="字段2" width="120"></el-table-column>
          <el-table-column prop="value.text" label="固定值" width="140"></el-table-column>
          <el-table-column label="控制" width="140">
            <template scope="scope">
              <el-row>
                <el-col :span="12"><el-button size="small" type="info" @click="editCondition(scope.$index, scope.row)">编辑</el-button>
                </el-col>
                <el-col :span="12"><el-button size="small" type="danger" @click="deleteCondition(scope.$index, scope.row)">删除</el-button></el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane v-for="tab in tabs.tabList" :label="'编辑条件#'+tab.index" :name="tab.index" :closable="true">
        <editor :condition="step.conditions[tab.index-1]" :availableFields="step.availableFields"></editor>
      </el-tab-pane>

    </el-tabs>
  </el-form>
</template>
<script>

  import StepCommon from "./mixins/StepMixin.js";
  import {Steps, Fields} from "../../model/DataModel";
  import Editor from "./innerEditor/FilterRowEditor.vue";


  export default{
    mixins: [StepCommon],
    data(){
      return {
        step: Steps.FilterRows(),
        tabs: {
          tabList: [],
          activeTabIndex: "0",
        }
      }
    },
    watch: {
      //修改标记
      'step.send_true_to'(newId, oldId){
        let labelId = "trueLabel", id = this.step.id;
        try {
          if (newId) {
            //添加标记
            this.$store.commit('changeLabel', {id, newId, oldId, labelId})
          } else {
            //不传newId,移除标记
            this.$store.commit('changeLabel', {id, oldId, labelId})
          }
        }
        catch (err) {
          this.step.send_true_to = "";
        }
      },
      'step.send_false_to'(newId, oldId){
        let labelId = "falseLabel", id = this.step.id;
        try {
          if (newId) {
            this.$store.commit('changeLabel', {id, newId, oldId, labelId})
          } else {
            //不传newId,移除标记
            this.$store.commit('changeLabel', {id, oldId, labelId})
          }
        } catch (err) {
          this.step.send_false_to = "";
        }

      }
    },

    methods: {
      addRecord(){
          this.step.conditions.push(Fields.FilterRows());
      },
      editCondition(index, row){
        //tab的index从1开始，所以需要index+1
        let tabIndex = index + 1, filterTabs = this.tabs.tabList.filter(el => el.index == tabIndex);
        //存在tab则激活该tab
        if (filterTabs.length > 0)
          this.tabs.activeTabIndex = filterTabs[0].index;
        else
        //否则新加入一个tab
          this.addNewTab(tabIndex);
      },
      deleteCondition(index, row){
        if (index < this.step.conditions.length) {
          //关闭tab窗口
          this.removeTab(index + 1 + "");
          this.step.conditions.splice(index, 1);
        }
      },
      addNewTab(index){
        let newTabName = index + "";
        this.tabs.tabList.push({index: newTabName, content: ""});
        this.tabs.activeTabIndex = newTabName;
      },
      removeTab(targetIndex){
        let tabs = this.tabs.tabList;
        let activeName = this.tabs.activeTabIndex;
        this.tabs.tabList = tabs.filter(tab => tab.index !== targetIndex);
        if (activeName === targetIndex) {
          tabs.forEach((tab, index) => {
            if (tab.index === targetIndex) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              activeName = nextTab != null ? nextTab.index : "0";
            }
          });
        }
        this.tabs.activeTabIndex = activeName;

      }
    },
    components: {
      Editor
    }
  }
</script>
